<template>
  <div>
    <h3>支付设置</h3>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="id" label="编号" width="300">
      </el-table-column>
      <el-table-column prop="fs" label="支付方式" width="300">
      </el-table-column>
      <el-table-column label="状态" width="300">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.show"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="(showModal2 = true), (showModal = false)"
            @click.native.prevent="chakanRow(scope.$index, tableData)"
            type="text"
            size="small"
            >查看</el-button
          >
          <el-button
            @click="(showModal = true), (showModal2 = false)"
            @click.native.prevent="bianjiRow(scope.$index, tableData)"
            type="text"
            size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <h2>编辑</h2>
        <span>编号:</span><input type="text" v-model="bian" />
        <span>桌位名称:</span><input type="text" v-model="zhuo" />
        <span>状态:</span><input type="text" v-model="zhuang" />
        <div>
          <button @click="handleConfirm">确定</button>
          <button @click="handleCancel">取消</button>
        </div>
      </div>
    </div>
    <div class="modal" v-if="showModal2">
      <div class="modal-content">
        <h2>查看</h2>
        <p>编号:{{ bian }}</p>
        <p>桌位名称:{{ zhuo }}</p>
        <p>状态:{{ zhuang ? "正常" : "异常" }}</p>
        <div>
          <button @click="handleConfirm2">确定</button>
          <button @click="handleCancel2">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: false,
      tableData: [
        {
          id: "1001",
          fs: "大桌",
          show: true,
        },
        {
          id: "2001",
          fs: "中桌",
          show: true,
        },
      ],
      showModal: false,
      showModal2: false,
      bian: "",
      zhuo: "",
      zhuang: "",
    };
  },
  methods: {
    handleConfirm() {
      this.showModal = false;
      this.tableData[this.index].id = this.bian;
      this.tableData[this.index].fs = this.zhuo;
      this.tableData[this.index].show =
        this.zhuang == "正常" ? "true" : "false";
    },
    handleCancel() {
      this.showModal = false;
    },
    handleConfirm2() {
      this.showModal2 = false;
    },
    handleCancel2() {
      this.showModal2 = false;
    },
    chakanRow(index, rows) {
      this.bian = rows[index].id;
      this.zhuo = rows[index].fs;
      this.zhuang = rows[index].show;
      this.index = index;
    },
    bianjiRow(index, rows) {
      this.bian = rows[index].id;
      this.zhuo = rows[index].fs;
      this.zhuang = rows[index].show ? "正常" : "异常";
      this.index = index;
    },
  },
};
</script>

<style scoped>
h3 {
  width: 1277px;
  height: 45px;
  background-color: rgb(220, 220, 220);
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: #e4e6eb;
  padding: 20px;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: 1;
  position: absolute;
  background-color: #ebeef5;
  z-index: 0;
}
</style>